<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="edit-form" style="width: 100%;">
        <el-form ref="userForm" :model="userInfo" :rules="rules" label-width="100">
          <!-- 工号 -->
          <el-row>
            <el-col :span="18">
              <el-form-item label="工号" prop="work_number">
                <!-- 工号是系统生成的  禁用这个组件-->
                <el-input
                  type="number"
                  v-model="userInfo.work_number"
                  class="inputW"
                  placeholder="请输入工号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="入职时间" prop="entry_date">
                <el-date-picker
                  v-model="userInfo.entry_date"
                  class="inputW"
                  format="YYYY-MM-DD"
                  placeholder="选择日期"
                  type="date"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="18">
              <el-form-item label="入职记录" prop="entry_date">
                <el-button plain @click="dialogTableVisible = true"> 查看 </el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 保存个人信息 -->
          <el-row type="flex">
            <el-col :span="12" style="margin-left: 220px">
              <el-button type="primary" @click="saveData">保存更新</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <el-dialog v-model="dialogTableVisible" title="Shipping address" width="400">
      <el-table :data="gridData">
        <el-table-column property="entry_date" label="入职时间" width="150" />
        <el-table-column property="work_number" label="入职工号" width="200" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref ,defineEmits} from "vue";
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from "element-plus";
import { useEmployeeStore } from "@/stores/employee"; // 引入 Pinia store
import { getrenewalInfo, postrenewalInfo } from "@/api/employee";
import { useRouter } from "vue-router";
const router = useRouter();

const dialogTableVisible = ref(false);
const gridData = ref([]);

const employeeStore = useEmployeeStore(); // 创建 store 实例

// 定义初始状态
const initialUserInfo = {
  userid: "",
  work_number: "", // 工号
  entry_date: "", // 入职时间
};

const userInfo = reactive({ ...initialUserInfo });

// 表单引用
const userForm = ref<InstanceType<typeof ElForm>>();



//   const emit = defineEmits<{
//   (e: 'select', row: DepartmentItem): void
// }>()
const emit = defineEmits(['clickchild'])


const handleRowClick = () => {    
  emit('clickchild', "false")
}


// 表单验证规则
const rules = reactive({
  work_number: [
    { required: true, message: "请输入工号", trigger: "blur" },
    { min: 1, max: 12, message: "姓名为1-12位", trigger: "blur" },
  ],
  entry_date: [{ required: true, message: "请选择入职时间", trigger: "blur" }],
});

const renewallist = ref();

onMounted(async () => {
  reset();
  const employeeInfo = employeeStore.employeeInfo; // 从 Pinia store 获取员工信息
  // console.log(employeeInfo);
  userInfo.userid = employeeInfo.userid as string;
  const res = await getrenewalInfo(employeeInfo.userid);
  gridData.value = res.data;
  renewallist.value = res.data;
  console.log(renewallist.value);
});

//重置表单数据
const reset = () => {
  Object.assign(userInfo, initialUserInfo);
  if (userForm.value) {
    userForm.value.resetFields();
  }
};

//保存按钮
const saveData = async () => {
  if (!userForm.value) return;
  userForm.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await postrenewalInfo(userInfo);
        if (res.code == "200") {
          handleRowClick()
          ElMessage.success("续约成功");
          router.push("/employeeManage");
        } else {
          ElMessage.error("续约失败");
        }
      } catch (error) {
        ElMessage.error("续约失败");
        console.error("续约失败", error);
      }
    } else {
      ElMessage.error("请检查表单信息");
    }
  });
};
</script>
<style lang="scss" scoped>
.edit-form {
  background: #fff;
  padding: 20px;

  .inputW {
    width: 380px;
  }
}
</style>
